<template>
  <div class="home-container">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="welcome-card">
          <template #header>
            <div class="card-header">
              <h3>欢迎来到慈善项目管理系统</h3>
            </div>
          </template>
          <div class="welcome-content">
            <p>在这里，您可以：</p>
            <ul>
              <li>浏览和参与各种慈善项目</li>
              <li>查看您的捐赠历史记录</li>
              <li>参与志愿者活动</li>
              <li>了解最新的慈善新闻</li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="quick-stats">
          <template #header>
            <div class="card-header">
              <h3>数据概览</h3>
            </div>
          </template>
          <div class="stats-content">
            <div class="stat-item">
              <h4>进行中的项目</h4>
              <p class="stat-number">{{ activeProjects }}</p>
            </div>
            <div class="stat-item">
              <h4>总捐赠金额</h4>
              <p class="stat-number">¥{{ totalDonations }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 模拟数据
const activeProjects = ref(12)
const totalDonations = ref('286,500')
</script>

<style lang="scss" scoped>
.home-container {
  padding: 20px;

  .welcome-card {
    margin-bottom: 20px;
    
    .welcome-content {
      font-size: 16px;
      
      ul {
        padding-left: 20px;
        margin-top: 10px;
        
        li {
          margin-bottom: 8px;
          color: #606266;
        }
      }
    }
  }

  .quick-stats {
    .stats-content {
      .stat-item {
        text-align: center;
        margin-bottom: 20px;
        
        h4 {
          color: #909399;
          font-size: 14px;
          margin-bottom: 8px;
        }
        
        .stat-number {
          font-size: 24px;
          color: #409EFF;
          font-weight: bold;
        }
      }
    }
  }

  .card-header {
    h3 {
      margin: 0;
      color: #303133;
    }
  }
}
</style>